<template>
  <div id="webgl-container" class="webgl-container">
    <canvas id="webgl" class="webgl"/>
  </div>

  <MoreInfo>
    <p>PBR(physically based rendering)</p>
    <p>UV coordinates</p>
    <p>图片越小越好(webp)</p>
    <p>png 无损</p>
    <el-divider />
    <p>纹理网址：</p>

    <el-link
      href="https://www.poliigon.com/"
      type="primary"
      target="_blank"
    >https://www.poliigon.com/</el-link
    >
    <el-link
      href="https://3dtextures.me/"
      type="primary"
      target="_blank"
    >https://3dtextures.me/</el-link
    >
    <el-link
      href="https://www.arroway-textures.ch/"
      type="primary"
      target="_blank"
    >https://www.arroway-textures.ch/</el-link
    >

    <el-divider />
    <p>可以每个面的纹理都一样，或者每个面的纹理单独设置</p>
  </MoreInfo>
</template>

<script setup>
import {
  BoxGeometry,
  Mesh,
  MeshBasicMaterial,
  TextureLoader,
  SRGBColorSpace
} from 'three'

import MoreInfo from '@/components/MoreInfo.vue'
import { useThree } from '@/hooks/use-three-hook'

const { scene, camera, addAnimationCallback } = useThree()

const textureLoader = new TextureLoader()

let mesh
const setMapTexture = () => {
  const colorTexture = textureLoader.load('/textures/door/color.jpg')
  colorTexture.colorSpace = SRGBColorSpace
  const ambientOcclusionTexture = textureLoader.load(
    '/textures/door/ambientOcclusion.jpg'
  )
  const geometry = new BoxGeometry(1, 1, 1)
  const material = new MeshBasicMaterial({
    map: colorTexture, // 颜色贴图
    aoMap: ambientOcclusionTexture, // 环境遮挡贴图
    aoMapIntensity: 1 // 环境遮挡强度
  })
  mesh = new Mesh(geometry, material)
  mesh.position.x = -1
  scene.value.add(mesh)
}

function loadColorTexture(path) {
  const texture = textureLoader.load(path)
  texture.colorSpace = SRGBColorSpace
  return texture
}

const cubes = []
const setCubeTexture = () => {
  const materials = [
    new MeshBasicMaterial({ map: loadColorTexture('/textures/Bridge2/posx.jpg') }),
    new MeshBasicMaterial({ map: loadColorTexture('/textures/Bridge2/posy.jpg') }),
    new MeshBasicMaterial({ map: loadColorTexture('/textures/Bridge2/posz.jpg') }),
    new MeshBasicMaterial({ map: loadColorTexture('/textures/Bridge2/negx.jpg') }),
    new MeshBasicMaterial({ map: loadColorTexture('/textures/Bridge2/negy.jpg') }),
    new MeshBasicMaterial({ map: loadColorTexture('/textures/Bridge2/negz.jpg') })
    // new MeshBasicMaterial({ map: loadColorTexture('/textures/flowers/flower-1.jpg') }),
    // new MeshBasicMaterial({ map: loadColorTexture('/textures/flowers/flower-2.jpg') }),
    // new MeshBasicMaterial({ map: loadColorTexture('/textures/flowers/flower-3.jpg') }),
    // new MeshBasicMaterial({ map: loadColorTexture('/textures/flowers/flower-4.jpg') }),
    // new MeshBasicMaterial({ map: loadColorTexture('/textures/flowers/flower-5.jpg') }),
    // new MeshBasicMaterial({ map: loadColorTexture('/textures/flowers/flower-6.jpg') })
  ]
  const geometry = new BoxGeometry(1, 1, 1)
  const cube = new Mesh(geometry, materials)
  cube.position.x = 1
  scene.value.add(cube)
  cubes.push(cube)
}

onMounted(() => {
  if (scene.value && camera.value) {
    setMapTexture() // 设置贴图纹理
    setCubeTexture() // 设置立方体贴图

    addAnimationCallback((delta) => {
      mesh.rotation.x += delta * 0.5
      mesh.rotation.y += delta * 0.1

      cubes.forEach((cube) => {
        cube.rotation.x += delta * 0.5
        cube.rotation.y += delta * 0.1
      })
    })
  }
})
</script>
